<template>
  <div class="gou">
      <!-- 消息 聊天 沟通 -->
      <div class="small" v-for="(v,i) in chick2" :key="i" @click="fun(i)">
          <p>
              <img :src="v.imgurl" alt="">
          </p>
          <p>
              <span>{{v.people}}<sub>{{v.gangwei1}}</sub></span>
              <span>{{v.msage}}</span>
          </p>
          <span>{{v.timer}}</span>
      </div>
  </div>
</template>

<script>
export default {
    data(){
    return {
      arrid:0
    }
  },
  computed:{
    chick2() {
      return this.$store.state.chick2;
    },
  },
   methods:{
    // fun(index){
    //   this.arrid = this.$store.state.chick2[index].id
    //   this.$router.push({ path: '/detail',query:{ id: this.arrid, i: index }})
    // }
  }
};
</script>

<style scoped>
.gou {
    margin-top: 1.20rem;
}
.small {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0.26rem 0;
}
.small > p:nth-child(1) {
    position: relative;
    width: 0.50rem;
    height: 0.50rem;
    background: orange;
    border-radius: 50%;
}

.small > p:nth-child(1) > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.small > p:nth-child(2){
    display: flex;
    flex-direction: column;
    margin-left: -0.10rem;
    width: 2.30rem;
}
.small > p:nth-child(2) > span:nth-child(1) {
    font-size: 0.16rem;
    font-weight: bold;
}
.small > p:nth-child(2) > span:nth-child(1) > sub {
    vertical-align: baseline;
    font-size: 0.12rem;
    color: #999;
}
.small > p:nth-child(2) > span:nth-child(2) {
    font-size: 0.12rem;
    color: #666;
}
.small > p:nth-child(2) > span:nth-child(3) {
    font-size: 0.15rem;
    color: #999;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
</style>